<template>
  <view class="mine-container">
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <!-- <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">汇购预排</u-button> -->
        </view>
      </view>
    </u-navbar>

    <view class="header u-f-ac">
      <view>
        <u-image width="100" height="100" shape="circle" :src="user.face || defaultFace"></u-image>
      </view>
      <view class="username" v-if="user">
        <view>{{user.nickname}}</view>
        <view>你好，欢迎来到{{site.site_name}}</view>
      </view>
      <view class="username" v-if="!user" @click="handleJudgeLogin('/pages/auth/login')">
        登录/注册
      </view>
    </view>

    <view class="u-flex-1 message-container" v-model="user">

      <view class="notice-bar-view">
        <view class="mine-common-view">
          <view class="common-item u-f-ajc u-f-column" @click="handleJudgeLogin('/mine-module/collect')">
            <view class="num">{{ nums.goods_collect_count || '--' }}</view>
            <view class="title">收藏商品</view>
          </view>
          <view class="common-item u-f-ajc u-f-column" @click="handleJudgeLogin('/mine-module/myfootprint')">
            <view class="num">{{ lishi || '--'}}</view>
            <view class="title">浏览记录</view>
          </view>
          <!-- <u-line direction="col" length="50%" margin="30rpx"></u-line> -->
          <!-- <view class="common-item" @click="handleJudgeLogin('/mine-module/kuanggaoList')">
            <view class="num">{{ huiyuan.pick_amount || '--' }}</view>
            <view class="title">消费数量</view>
          </view> -->
        </view>
      </view>
      <view class="body-view">
        <!-- 我的订单 -->
        <view class="block-view">
          <view class="block-header u-flex u-row-between">
            <view class="title">
              我的订单
            </view>
            <view class="more-text" @click="handleJudgeLogin('/pages/order/order-list?value=', 0)">
              全部订单
              <u-icon class="u-margin-left-8" name="arrow-right" color="#909399" size="27"></u-icon>
            </view>
          </view>

          <view class="block-body">
            <view class="block-item-5" @click="handleJudgeLogin('/pages/order/order-list?value=', 1)">
              <view class="block-img">
                <image class="block-icon" src="@/static/images/member/mine/pay.png"></image>
              </view>
              <view class="block-title">待付款</view>
            </view>
            <view class="block-item-5" @click="handleJudgeLogin('/pages/order/order-list?value=', 2)">
              <view class="block-img">
                <image class="block-icon" src="@/static/images/member/mine/send.png"></image>
              </view>
              <view class="block-title">待发货</view>
            </view>
            <view class="block-item-5" @click="handleJudgeLogin('/pages/order/order-list?value=', 3)">
              <view class="block-img">
                <image class="block-icon" src="@/static/images/member/mine/deliver.png"></image>
              </view>
              <view class="block-title">待收货</view>
            </view>
            <view class="block-item-5" @click="handleJudgeLogin('/pages/order/order-list?value=', 4)">
              <view class="block-img">
                <image class="block-icon" src="@/static/images/member/mine/message.png"></image>
              </view>
              <view class="block-title">评价</view>
            </view>
            <view class="block-item-5" @click="handleJudgeLogin('/pages/order/after-sale/after-sale')">
              <view class="block-img">
                <image class="block-icon" src="@/static/images/member/mine/service.png"></image>
              </view>
              <view class="block-title">退款/退货</view>
            </view>
          </view>
        </view>
        <!-- 其它服务 -->
        <view class="block-view">
          <view class="block-header">
            <view class="title">
              我的钱包
            </view>
            <view class="more-text">
            </view>
          </view>

          <view class="block-body">
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/balance-detailed2')">
              <image src="/static/images/member/mine/daijinquan.png" mode=""></image>
              <view class="block-title">代金券</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon3')">
              <image src="/static/images/member/mine/duihuanquan.png" mode=""></image>
              <view class="block-title">百汇券</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/lingquan/mingxi')">
              <image src="/static/images/member/mine/qiangdanquan.png" mode=""></image>
              <view class="block-title">汇购券</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon4')">
              <image src="/static/images/member/mine/baokuanquan.png" mode=""></image>
              <view class="block-title">爆款券</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/chongzhi/paymentmobile')">
              <image src="/static/images/member/mine/chongzhi.png" mode=""></image>
              <view class="block-title">充值</view>
            </view>
            <!-- <view class="block-item-4" @click="handleJudgeLogin('/mine-module/tixian/list')">
              <image src="/static/images/member/mine/tixian.png" mode=""></image>
              <view class="block-title">红包</view>
            </view> -->
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon2')">
              <image src="/static/images/member/mine/butiejifen.png" mode=""></image>
              <view class="block-title">补贴额度</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon5')">
              <image src="/static/images/member/mine/huangjinquan.png" mode=""></image>
              <view class="block-title">黄金券</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon6')">
              <image src="/static/images/member/mine/huangjinquan.png" mode=""></image>
              <view class="block-title">黄金额度</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon7')">
              <image src="/static/images/member/mine/huangjinquan.png" mode=""></image>
              <view class="block-title">消费积分</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/coupon8')">
              <image src="/static/images/member/mine/huangjinquan.png" mode=""></image>
              <view class="block-title">增值积分</view>
            </view>

          </view>
        </view>

        <view class="block-view">
          <view class="block-header">
            <view class="title">
              其它服务
            </view>
            <view class="more-text">
            </view>
          </view>

          <view class="block-body">
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/level/myterritory')">
              <image src="/static/images/member/mine/wodetuandui.png" mode=""></image>
              <view class="block-title">我的团队</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/level/myterritory2')">
              <image src="/static/images/member/mine/wodetuandui.png" mode=""></image>
              <view class="block-title">黄金团队</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/haibao/shareHaibao')">
              <image src="/static/images/member/mine/fenxianghaibao.png" mode=""></image>
              <view class="block-title">分享海报</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/wl/wl')">
              <image src="/static/images/member/mine/qiehuanzhanghao.png" mode=""></image>
              <view class="block-title">切换账号</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/website-message')">
              <image src="/static/images/member/mine/zhanneixiaoxi.png" mode=""></image>
              <view class="block-title">站内消息</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/about_us')">
              <image src="/static/images/member/mine/guanyuwomen.png" mode=""></image>
              <view class="block-title">关于我们</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/cj/cj')">
              <image src="/static/images/member/mine/choujiang.png" mode=""></image>
              <view class="block-title">抽奖</view>
            </view>

            <!-- <view class="block-item-4" @click="handleJudgeLogin('/mine-module/caidan/tourujilu')">
              <image src="/static/images/member/mine/choujiang.png" mode=""></image>
              <view class="block-title">投入纪录</view>
            </view> -->
            <!-- <view class="block-item-4" @click="handleJudgeLogin('/mine-module/caidan/duihuancaidan')">
              <image src="/static/images/member/mine/choujiang.png" mode=""></image>
              <view class="block-title">兑换彩蛋</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/caidan/zhongjiangjilu')">
              <image src="/static/images/member/mine/choujiang.png" mode=""></image>
              <view class="block-title">中奖纪录</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/caidan/yansejifen')">
              <image src="/static/images/member/mine/choujiang.png" mode=""></image>
              <view class="block-title">颜色积分</view>
            </view>
            <view class="block-item-4" @click="handleJudgeLogin('/mine-module/caidan/renwu')">
              <image src="/static/images/member/mine/choujiang.png" mode=""></image>
              <view class="block-title">任务</view>
            </view> -->

          </view>
        </view>
      </view>
    </view>

    <!-- <view class="u-f-ajc u-f-column banquan">
      <view>版权所有@深圳市华龙天韵科技有限公司商城</view>
      <view>电话：13823528142</view>
      <view><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2020100900号-1 </a></view>
    </view> -->

    <!-- 为你推荐商品 -->
    <!-- <goods-recommend ref="goodsRecommend" title="为你推荐" :categoryId="1"></goods-recommend> -->



    <u-back-top :scroll-top="scrollTop" :customStyle="customStyle" :iconStyle="iconStyle"></u-back-top>
  </view>
</template>

<script>
  import * as API_Members from '@/api/members.js';
  import Cache, {
    Keys
  } from '@/utils/cache.js';
  import * as API_Connect from '@/api/connect.js';

  export default {
    data() {
      return {
        user: '',
        nums: '',
        points: '', //积分
        coupons: '', //优惠券
        defaultFace: '/static/images/member/icon-noface.jpg',
        // #ifdef MP
        barHeight: this.customBar, //状态栏+导航栏高度
        // #endif
        // #ifdef APP-PLUS || H5
        barHeight: this.statusBar, //状态栏高度
        // #endif
        scrollTop: 0, //滚动高度
        customStyle: {
          background: '#B2B2B2'
        },
        iconStyle: {
          color: '#FFFFFF',
          fontSize: '36rpx'
        },
        site: Cache.getItem(Keys.site),
        lishi: 0,
        huiyuan: {},
        region: '',
      };
    },
    //每次进入页面都会调用
    onShow() {
      const cacheUser = Cache.getItem(Keys.user);
      if (cacheUser) {
        this.user = cacheUser;
        this.getStatisticsNum();
        this.getPoints();
        this.getCoupons();
        this.getFootprints();
      } else {
        this.user = '';
        this.nums = '';
        this.points = '';
        this.coupons = '';
      }
    },
    onLoad() {
      //监听退出登录消息
      uni.$on('logout', function(data) {
        this.user = '';
        this.nums = '';
        this.points = '';
        this.coupons = '';
      })
    },
    onPullDownRefresh() {
      console.log('刷新')
      const $this = this;
      setTimeout(function() {
        //停止刷新
        uni.stopPullDownRefresh();
        // 这里放刷新数据的方法
        if ($this.user) {
          $this.getMember();
          $this.getStatisticsNum();
          $this.getPoints();
          $this.getCoupons();
        }
      }, 1000);
    },
    //监听导航栏自定义按钮事件
    onNavigationBarButtonTap(e) {
      if (e.index == 0) {
        this.onMessage();
      }
      if (e.index == 1) {
        this.onSetting();
      }
    },
    //滚动距离
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    // 滚动到底部
    onReachBottom() {
      this.$refs.goodsRecommend.params.page_no += 1
      this.$refs.goodsRecommend.getGoodsList()
    },
    // onBackPress() {
    //   let strTime = new Date().getTime()
    //   if (strTime - this.strTime <= 2000) {
    //     console.log('连续两次返回 就是退出')
    //     this.onLogout()
    //   }
    //   this.strTime = strTime
    // },
    methods: {
      //退出登录
      onLogout() {
        uni.$emit('logout', {
          msg: '退出登录消息'
        })
        let mobile = uni.getStorageSync('mobile')
        //清除会员信息
        uni.removeStorageSync('user')
        //清除token
        uni.removeStorageSync('accessToken')
        uni.setStorageSync('mobile', mobile)
      },
      // 获取实名认证
      getFootprints() {
        API_Members.memberInfo().then(response => {
          console.log('会员商城信息', response)
          this.huiyuan = response.info
          if (!this.huiyuan.identity) this.$u.toast('您还未实名认证，请点击右上角设置进入实名认证')
        })

        API_Members.queryHistoryList({
          page_no: 0,
          page_size: 9999
        }).then(res => {
          console.log('历史记录列表', res)
          if (res && res.data && res.data.length) {
            this.lishi = res.data.length
            let lishiArr = []
            res.data.forEach((item) => {
              item.history.forEach((item2) => {
                lishiArr.push(item2)
              })
            })
            this.lishi = lishiArr.length
          }
        })
      },
      async qiandao() {
        let res = await API_Members.memberSign()
        console.log(res)
        if (res) this.$u.toast(`已领+${res}补贴额度`)
        else this.$u.toast('今日已领过补贴额度')
      },
      //点击事件
      handleJudgeLogin(url, value) {
        if (url == '/pages/auth/authentication') {
          if (this.region) return this.$u.toast('您已申请区域代理，请勿重复申请')
        }
        let $this = this
        uni.getNetworkType({
          success(res) {
            if (res.networkType !== 'none') {
              $this.judgeLogin(() => {
                if (value) {
                  uni.navigateTo({
                    url: url + value
                  })
                } else {
                  uni.navigateTo({
                    url: url
                  })
                }
              }, 'force')
            } else {
              $this.$u.toast('当前无网络，请检查后重试')
            }
          }
        })
      },
      wxMiniBindPhone(e) {
        if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
          return;
        }
        const encrypted = e.detail.encryptedData
        const iv = e.detail.iv
        API_Connect.wxMiniBindPhone(encrypted, iv).then(res => {
          if (res.bindPhone == "success") {
            var user = Cache.getItem(Keys.user);
            user.mobile = res.mobile
            Cache.setItem(Keys.user, user)
            this.user = user
            this.getMember();
          }
        })
      },
      bindPhone() {
        uni.navigateTo({
          url: "/pages/auth/bind-phone"
        })
      },
      //获取用户信息
      getMember() {
        API_Members.getUserInfo().then(res => {
          this.user = res;
          Cache.setItem(Keys.user, this.user);
        });
      },
      //获取统计数量
      getStatisticsNum() {
        API_Members.getStatisticsNum().then(res => {
          this.nums = res;
        })
      },
      // 获取消费积分
      getPoints() {
        API_Members.getPoints().then(response => {
          this.points = response
        })
      },
      //获取可用优惠券
      getCoupons() {
        const params = {
          page_no: 1,
          page_size: 10,
          status: 1
        }
        API_Members.getCoupons(params).then(response => {
          this.coupons = response.data_total
        })
      },
      //设置
      onSetting() {
        this.handleJudgeLogin('/mine-module/setting');
      },
      onMessage() {
        this.handleJudgeLogin('/mine-module/website-message');
      }
    }
  }
</script>

<style lang="scss">
  .bind-phone {
    font-size: 22rpx !important;
    color: #FFFFFF;
    background-color: #FD5B00;
    margin: 10rpx 0;
    border-radius: 30rpx;

    &:after {
      border: none !important;
    }
  }

  .wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
  }

  .notice-bar-view {
    margin: 0 30rpx;

    .mine-common-view {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .common-item {
        width: 48%;
        height: 160rpx;
        border-radius: 20rpx;
        color: #fff;
        background: linear-gradient(0deg, #EFB55D, #F9C675);

        .num {
          font-size: 34rpx;
          font-weight: 600;
          margin-bottom: 10rpx;
        }

        .title {
          font-size: 26rpx;
        }
      }
    }
  }

  .body-view {
    .block-view {
      background-color: #fff;
      margin: 30rpx;
      border-radius: 10rpx;
      padding: 10rpx 0;

      .block-header {
        font-size: 28rpx;
        font-weight: 600;
        margin: 10rpx 0 28rpx;

        .title {
          // border-left: 8rpx solid $u-type-error;
          padding: 0 20rpx;
          font-size: 26rpx;
        }

        .more-text {
          color: #909399;
          font-size: 26rpx;
          font-weight: 400;
          margin-right: 20rpx;
        }
      }

      .block-body {
        display: flex;
        flex-direction: row;
        justify-content: left;
        flex-wrap: wrap;
        margin: 20rpx 0;

        .block-item-5 {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .block-img {
            .block-icon {
              width: 120rpx;
              height: 120rpx;
              margin-bottom: 6rpx;
            }
          }

          .block-title {
            font-size: 25rpx;
            color: #606266;
          }
        }

        .block-item-4 {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 0 20rpx;
          width: 25%;

          image {
            width: 70rpx;
            height: 70rpx;
            margin-bottom: 10rpx;
          }

          .block-title {
            font-size: 25rpx;
            color: #606266;
          }
        }
      }
    }
  }
</style>


<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/member/mine/header.png) no-repeat 0 0;
    background-size: 100% 500rpx;
  }

  /deep/ .navbars {
    image {
      width: 220rpx !important;
    }
  }

  .header {
    width: 100%;
    height: 220rpx;
    padding: 0 50rpx;
    // background-color: skyblue;
    color: #fff;

    .username {
      margin-left: 20rpx;

      >view:nth-of-type(1) {
        font-size: 40rpx;
      }

      >view:nth-of-type(2) {
        font-size: 26rpx;
      }
    }
  }

  .message-container {
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
    padding: 40rpx 0 0;
  }

  .mine-container {
    padding-bottom: 150rpx;
  }

  .banquan {
    view {
      margin-bottom: 10rpx;
    }
  }
</style>